import {GET_CONTACT_LIST} from "@/api/contact";
import {getFileAccessHttpUrl} from "@/until/fileUtil";
import {getCurrentLocation} from "@/until/locationUtil";
import {baseFilePath, contactDetailPath} from "@/until/publicConfig";
import {baseMixins} from "@/mixins/baseMixins";
import {requestGet} from "@/until/means/request";

const mapMixins = {
  mixins: [baseMixins],
  data() {
    return {
      keyword: '',
      /**
       * 地图相关数据
       */
      latitude: 0,
      longitude: 0,
      contactDatas: [],
      contactDetailPath,
      scale: 11.5,
      markers: []
    }
  },
  methods: {
    /**
     * 添加所有图标
     */
    async addMarks() {
      let {longitude, latitude} = this;
      const point = {longitude, latitude}
      this.addCurrentUserMark(point)
      await this.reloadContactMarks(point)
    },
    /**
     * 添加自身图标
     */
    addCurrentUserMark({longitude, latitude}) {
      const markerType = 'user'
      this.removeMarksByMarkerType(markerType)
      let currentLocMark = {
        id: 1,
        width: 25,
        height: 25,
        longitude,
        latitude,
        iconPath: `${baseFilePath}/map/map-people.png`,
        markerType
      }
      this._mapContext.addMarkers({
        markers: [currentLocMark],
        clear: false,
      })
      this.markers.unshift(currentLocMark)
    },
    async reloadContactMarks(point) {
      const markerType = 'contact'
      this.removeMarksByMarkerType(markerType)
      await this.getContactDatas(point)
      let {contactDatas} = this
      let contactMarkers = contactDatas.map((contactItem, index) => {
        let {latitude, longitude, id: contactId, liaisonName} = contactItem
        return {
          id: index + 2,
          width: 25,
          height: 25,
          longitude,
          latitude,
          iconPath: `${baseFilePath}/map/map-cantact.png`,
          markerType,
          contactInfo: contactItem,
          joinCluster: true,
          label: {
            content: liaisonName,
            color: '#707070',
            haloColor: '#fff',
            textAlign: 'center',
          }
        }
      })
      this.markers = [...this.markers, ...contactMarkers]
      this._mapContext.addMarkers({
        markers: contactMarkers,
        clear: false,
      })
    },
    async getContactDatas({longitude, latitude}) {
      let {keyword} = this
      const [range, pageSize] = [100, 200]
      const queryParams = {keyword, longitude, latitude, range, pageSize}
      return new Promise((resolve, reject) => {
        requestGet({url: GET_CONTACT_LIST, data: queryParams}).then(res => {
          this.contactDatas = res?.map(item => {
            item.liaisonPic = item.liaisonPic != null && item.liaisonPic !== '' ? getFileAccessHttpUrl(item.liaisonPic) : `${baseFilePath}/contact-station-cover-default.png`;
            item.liaisonDistance = (item.liaisonDistance / 1000).toFixed(2)
            return item
          }) || []
          resolve()
        })
      })
    },
    removeMarksByMarkerType(markerType) {
      // this.markers = this.markers.filter(marker => marker.markerType !== markerType)
    }
  },
  async onReady() {
    let {
      marsLongitude: longitude,
      marsLatitude: latitude
    } = await getCurrentLocation();
    this.longitude = longitude
    this.latitude = latitude
    this._mapContext = uni.createMapContext("map", this);
    let owner = this
    this._mapContext.initMarkerCluster({
      enableDefaultStyle: false,
      zoomOnClick: true,
      gridSize: 60,
      complete(res) {
        owner.addMarks()
        owner.addMarkerClusterClick != null && typeof owner.addMarkerClusterClick === 'function' && owner.addMarkerClusterClick()
      }
    });
  }
}

export {mapMixins}
